<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>采购</title>
    <link rel="stylesheet" href="../../style/css/common.css">
    <link rel="stylesheet" href="../../style/css/purchase.css">
    <script src="../../style/js/jquery-3.4.1.min.js"></script>
    <script src="../../style/js/common.js"></script>
    <script src="../../style/js/purchase.js"></script>
    <script src="../../style/js/alert.js"></script>

</head>

<body>
    <div class="nav-bar clearfix">
        <div class="brand fl">
            <a href="../">进销存管理系统</a>
        </div>
        <div class="buttons fr">
            <div class="user-button"></div>
        </div>
    </div>
    <div class="contain clearfix">
        <!--  左栏  -->
        <div class="left-contain fl">
            <div class="model purchase-menu">
                <ul>
                    <li>合同</li>
                    <li>采购计划单</li>
                    <li>采购单</li>
                </ul>
            </div>
        </div>
        <!--  右栏  -->
        <div class="right-contain fr">
            <!-- 合同 -->
            <div class="model show">
                <div class="title">合同</div>
                <div class="show-body">
                    <div class="table-show contractTable"></div>
                    <div class="buttons">
                        <button class="change-page contractTableChl">
                            <</button> <button class="change-page contractTableChr">>
                        </button>
                        <button class="add-contract">查看明细</button>
                        <button class="cel-contract hideButton">返回</button>
                    </div>
                </div>
            </div>
            <!-- 采购计划单 -->
            <div class="model hide">
                <div class="title">采购计划单</div>
                <div class="show-body">
                    <div class="table-show purchasePlanTable">
                    </div>
                    <div class="buttons">
                        <button class="change-page purchasePlanTableChl">
                            <</button> <button class="change-page purchasePlanTableChr">>
                        </button>
                        <button class="add-purchasePlan">添加采购计划单</button>
                        <!-- 点击查看详情后消失 -->
                        <button class="contract-search">查看详情</button>
                        <!-- <button class="upd-purchasePlan">修改主表</button> -->
                        <!-- 点击查看详情后才显示 -->
                        <button id="add-purchasePlanDetail" class="hideButton">添加明细</button>
                        <button class="del-purchasePlan">删除</button>
                        <!-- 点击查看详情后才显示 -->
                        <button class="cal-purchasePlan hideButton">返回</button>
                    </div>
                </div>
            </div>
            <!-- 采购单 -->
            <div class="model hide">
                <div class="title">采购单</div>
                <div class="show-body">
                    <div class="table-show purchaseTable"></div>
                    <div class="buttons">
                        <button class="change-page purchaseTableChl">
                            <</button> <button class="change-page purchaseTableChr">>
                        </button>
                        <button class="add-purchase">添加采购单</button>
                        <!-- 点击查看详情后消失 -->
                        <button class="purchase-search">查看详情</button>
                        <button class="upd-purchase">修改</button>
                        <!-- 点击查看详情后才显示 -->
                        <button id="add-purchaseDetail" class="hideButton">添加明细</button>
                        <button class="del-purchase">删除</button>
                        <!-- 点击查看详情后才显示 -->
                        <button class="cal-purchase hideButton">返回</button>
                    </div>
                </div>
            </div>
        </div>
        <!--  form area  -->
        <div class="form-area">
            <!-- 添加采购计划单弹框1 -->
            <div class="model form-box hide" id="addPurchasePlan">
                <div class="model">
                    <div class="chooseContract">
                        <span>合同编号</span>
                        <button class="chooseContractBottom">选择合同</button>
                    </div>
                    <div class="chooseContract-table"></div>
                    <button class="contract-submit">提交</button>
                    <button class="contract-cancel">取消</button>
                </div>
            </div>
            <!-- 添加采购计划单弹框2 -->
            <div class="model form-box contractZhu hide">
                <div class="model">
                    <div class="contractZhu-table">
                        <div class="zhu">
                            <div class="title">合同主要信息（点击查看详细信息）</div>
                        </div>
                        <div class="ci">
                            <div class="title">合同详细信息（点击选取）</div>
                        </div>
                        <button class="chooseContractDetail">完成</button>
                        <button class="chooseContractDetailCancel">取消</button>
                    </div>
                </div>
            </div>
            <!-- 修改采购计划单弹框1---修改主表 -->
            <div class="model form-box purchasePlanZhuChange hide">
                <div class="model">
                    <label for="contract">供应商</label>
                    <input type="text" id="contract" placeholder="供应商" min="1" class="i150" />
                    <label for="plan-date">计划时间</label>
                    <input type="date" id="plan-date" placeholder="计划时间" min="1" class="i150" />
                    <label for="employee-no">经理</label>
                    <input type="text" id="employee-no" placeholder="经理" min="1" class="i150" />
                    <button class="submit">提交</button>
                    <button class="cancel">取消</button>
                </div>
            </div>
            <!-- 修改采购计划单弹框1---添加明细 -->
            <div class="model form-box addPurchasePlanDetailAlert hide">
                <div class="model">
                    <div class="title">合同剩余可选取的详细信息（点击选取）</div>
                    <div class="purchasePlanDetail-table">
                    </div>
                    <button class="commit-addPurchasePlanDetail">完成</button>
                    <button class="cancel-addPurchasePlanDetail">取消</button>
                </div>
            </div>


            <!-- 添加采购单弹框1 -->
            <div class="model form-box hide" id="addPurchase">
                <div class="model">
                    <div class="choosePurchasePlan">
                        <span>采购计划</span>
                        <button class="choosePurchasePlanBottom">选择采购计划</button>
                    </div>
                    <div class="choosePurchasePlan-table"></div>
                    <button class="PurchasePlan-submit">提交</button>
                    <button class="PurchasePlan-cancel">取消</button>
                </div>
            </div>
            <!-- 添加采购计划单弹框2 -->
            <div class="model form-box purchasePlanZhu hide">
                <div class="model">
                    <div class="purchasePlanZhu-table">
                        <div class="zhu">
                            <div class="title">采购计划主要信息（点击查看详细信息）</div>
                        </div>
                        <div class="ci">
                            <div class="title">采购计划详细信息（点击选取）</div>
                        </div>
                        <button class="choosePurchasePlanDetail">完成</button>
                        <button class="choosePurchasePlanDetailCancel">取消</button>
                    </div>
                </div>
            </div>
            <!-- 添加采购单用户输入弹框1 -->
            <div class="model form-box purchaseUserZhu hide">
                <div class="model">
                    <div class="purchaseUserZhu-table">
                        <label for="product-number">商品数量</label>
                        <input type="number" id="product-number" placeholder="商品数量" min="1" class="i150" />
                        <button class="purchaseUserZhu-commit">完成</button>
                        <button class="purchaseUserZhu-cancel">取消</button>
                    </div>
                </div>
            </div>
            <!-- 添加采购单用户输入弹框2 -->
            <div class="model form-box purchaseUserDetail hide">
                <div class="model">
                    <div class="purchaseUserDetail-table">
                        <label for="freight">运费</label>
                        <input type="number" id="freight" placeholder="运费" min="1" class="i150" />
                        <button class="purchaseUserDetail-commit">完成</button>
                        <button class="purchaseUserDetail-cancel">取消</button>
                    </div>
                </div>
            </div>
            <!-- 修改采购单弹框1---修改主表 -->
            <div class="model form-box purchaseZhuChange hide">
                <div class="model">
                    <label for="freight">运费</label>
                    <input type="number" id="freight" placeholder="运费" min="1" class="i150" />
                    <button class="submit">提交</button>
                    <button class="cancel">取消</button>
                </div>
            </div>
            <!-- 修改采购单弹框1---添加明细 -->
            <div class="model form-box addPurchaseDetailAlert hide">
                <div class="model">
                    <div class="title">采购计划单中剩余可选取的详细信息（点击选取）</div>
                    <div class="purchaseDetail-table">
                    </div>
                    <button class="commit-addPurchaseDetail">完成</button>
                    <button class="cancel-addPurchaseDetail">取消</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>